import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import { RouteRecordRaw } from 'vue-router'
export const useUserStore = defineStore('user', () => {
  const breadcrumbList = ref<RouteRecordRaw[]>([])
  const selectMenuKeys = ref<string[]>(['/'])
  const isShow = ref<boolean>(true)
  const isShowBreadcrumb = computed(() => isShow.value)
  const breadcrumbData = computed(() => breadcrumbList.value)
  const addBreadcrumb = (item: RouteRecordRaw) => {
    isShow.value = isShow.value || true
    const index = breadcrumbList.value.findIndex((key) => key.path === item.path)
    index == -1 && breadcrumbList.value.push(item)
  }
  const removeBreadcrumb = (item: RouteRecordRaw) => {
    selectMenuKeys.value[0] = item.path
    const index = breadcrumbList.value.findIndex((key) => key.path === item.path)
    index > -1 && breadcrumbList.value.splice(index + 1)
  }
  const clearBreadcrumb = () => {
    // 清空面包屑
    breadcrumbList.value.splice(1)
    selectMenuKeys.value = ['/']
    isShow.value = false
  }
  return {
    breadcrumbList,
    breadcrumbData,
    selectMenuKeys,
    isShowBreadcrumb,
    addBreadcrumb,
    removeBreadcrumb,
    clearBreadcrumb,
  }
})
